<template>
  <div class="app-container calendar-list-container" >
    <div class="filter-container" v-loading="loading">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="部门">
          <el-cascader
            size="mini"
            :options="formPage.cascader_data"
            :show-all-levels="false" :props="props"
            v-model="searchData.pids"
            @change="addPid"
            change-on-select
          ></el-cascader>
        </el-form-item>
        <el-form-item label="角色名">
          <el-input size="mini" v-model="searchData.name" placeholder="角色名"></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="20" style="padding-bottom: 20px">
        <el-col :span="2"><el-button  size="mini" type="primary" @click="handleAdd" icon="el-icon-circle-plus">新增</el-button></el-col>
        <el-col :span="2"><el-button  size="mini" type="primary" @click="handleUpdate" :disabled="multipleSelection.length!=1" icon="el-icon-edit">修改</el-button></el-col>
        <el-col :span="2"><el-button  size="mini" type="primary" @click="handleAuth" :disabled="multipleSelection.length!=1" icon="el-icon-zoom-in">授权</el-button></el-col>
        <el-col :span="2"><el-button  size="mini" type="primary" @click="handleDel" :disabled="multipleSelection.length!=1" icon="el-icon-delete">删除</el-button></el-col>
        <el-col :span="2" :offset="18"><el-button size="mini" type="primary" @click="onSearch" icon="el-icon-search">查询</el-button></el-col>
      </el-row >
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          fixed="left"
          width="50">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="50"
          fixed="left">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="auto"
          fixed="left">
          <template slot-scope="scope">
            <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          fixed="left"
        width="auto">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="auto"
          fixed="left">
          <template slot-scope="scope">
               <span v-if="scope.row.status==0">停用</span>
               <span v-if="scope.row.status==1">启用</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="foot-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.formPage.pagination.pageNumber"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="this.formPage.pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.formPage.pagination.totalRow">
        </el-pagination>
      </div>
  </div>




    <roleAdd v-bind:formPage="formPage" >

    </roleAdd>

    <authResource v-bind:authResource="authResource">


    </authResource>
  </div>
</template>

<script>
  import {roleList} from '@/api/role/role'
  import {deptList} from '@/api/dept/dept'
  import  roleAdd from './add'
  import authResource from './authResource'
    export default {
        name: "roleManger",
      components: {roleAdd,authResource},
      data() {
        return {
          props: {
            value: 'id',
            label:'simpleName',
            children: 'children'
          },
          multipleSelection:[],
          searchData: {
            id: '',
            name: '',
            page:'1',
            size:'10',
            deptId:'',
            pids:[]
          },
          loading:false,
          tableData: [],
          dialogFormVisible: false,
          authResource:{
            show:false,
            id:null,
          },
          formPage:{
            cascader_data:[],
            show:false,
            formData: {
              name: '',
              description: '',
              id: '',
              status: '',
              seq: '',
              deptId:''
            },
            pagination:{
              pageNumber:1,
              totalRow:0,
              pageSize:10,
            }
          },
          cache:{
            id:null,
          },
          formLabelWidth: '120px',
        }

      },
      methods: {
        onSearch() {
          // console.log(this.searchData)
          //
          // return
          this.getTableData(this.searchData);
        },
        handleAdd(){
          console.log(this.cache.id+"**")
          if(this.cache.id!=null){
            this.formPage.formData={
              name: '',
              description: '',
              id: '',
              status: '',
              seq: '',
              deptId:''
          }
            this.cache.id=null;
          }
          ;
          this.formPage.formData.id=null;
          this.formPage.show=true;
          console.log(this.formPage.cascader_data)
        },
        handleUpdate(row) {
          if(this.multipleSelection.length>0){
            row=this.multipleSelection[0];
          }
          console.log(this.cache.id+"**"+row.id);
          this.formPage.show=true;
          if(this.cache.id!=row.id||this.cache.id==null){
            for(var p in  this.formPage.formData){//遍历json对象的每个key/value对,p为key
              this.formPage.formData[p]=row[p]
            }
            this.formPage.formData.status+='';
            this.cache.id=row.id;
          }
        },
        handleAuth(){
          let id=this.multipleSelection[0].id;
           this.authResource.show=true;
           this.authResource.id=id;
        },
        getTableData(params){
          this.loading=true;
          roleList(params).then(response => {
            this.tableData=response.data.data.list
            this.formPage.pagination.pageSize=response.data.data.pageSize;
            this.formPage.pagination.totalRow=response.data.data.totalRow;
            this.formPage.pagination.pageNumber=response.data.data.pageNumber;
            // console.log(this.pagination)
            setTimeout(() => {
              this.loading=false;
            }, 300);
          }).catch(error => {
            reject(error)
          });
        },
        handleDel(row){



        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          // console.log(this.multipleSelection)
        },
        handleSizeChange(val) {
          this.searchData.size=val;
          this.getTableData(this.searchData);
        },
        handleCurrentChange(val) {
          this.searchData.page=val;
          this.getTableData(this.searchData);
        },
        initDeptData(){
          console.log(111)
          deptList({}).then(response => {
            this.formPage.cascader_data=response.data.data;
          }).catch(error => {
          })
        },
        addPid(aaa){
          if(aaa.length==1){
            this.searchData.deptId=aaa[0]
          }
          else {
            this.searchData.deptId=aaa[aaa.length-1]
          }
          // console.log(this.formPage.formData)
        },
      },
      mounted(){

        this.getTableData(this.searchData);
        this.initDeptData()
      }
    }
</script>

<style scoped>

</style>
